<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>hello Vue</title>
</head>
<body>
<div id="app">
    <!-- v-if判断 不满足条件的标签或者html，DOM不会生成 -->
    <h1 v-if='flag'>v-if是true是显示</h1>
    <h1 v-if='!flag'>v-if是false是显示</h1>
    <!-- v-show 不满足条件的标签或者html，DOM会生成，只是通过一个样式style='display:none'来隐藏 -->
    <h1 v-show='flag'>v-show是true是显示</h1>
    <h1 v-show='!flag'>v-show是false是显示</h1>

    <!-- v-if/ v-else-if / v-else判断 -->
    <div v-if="type === 'A'">
        A
    </div>
    <!-- v-else-if的使用必须要有v-if -->
    <div v-else-if="type === 'B'">
        B
    </div>
    <div v-else-if="type === 'C'">
        C
    </div>
    <div v-else>
        Not A/B/C
    </div>
</div>
</body>
<script src="../../css/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            type: 'B',
            flag: true
        }
    });
</script>
</html>
